<template>
  <div id="zhuce">
    <div id="black">
      <router-link to="/dewu"
        ><span id="one" class="iconfont icon-shanghuasanjiao"></span
      ></router-link>
    </div>

    <p id="tishi">请您注册账号后登录</p>
    <div id="kuang">
      <div class="zzz">
        <p>
          <span>用户名</span
          ><input type="text" v-model="username" @blur="usert" />
          <span class="iconfont icon-multiply-full cha" @click="qing(0)"></span>
        </p>
      </div>

      <div class="zzz">
        <p>
          <span>密码</span
          ><input type="password" v-model="userpass" @blur="passt" />
          <span class="iconfont icon-multiply-full cha" @click="qing(1)"></span>
        </p>
      </div>
      <div class="zzz">
        <p>
          <span>手机号码</span
          ><input id="mi" type="text" v-model="usertel" @blur="phonet" />
          <span class="iconfont icon-multiply-full cha" @click="qing(2)"></span>
        </p>
      </div>
      <div class="zzz">
        <p>
          <span>邮箱</span
          ><input type="text" v-model="usermail" @blur="mailt" />
          <span class="iconfont icon-multiply-full cha" @click="qing(3)"></span>
        </p>
      </div>
    </div>
    <div id="gou">
      <div id="bb"></div>
      <p>
        <van-checkbox
          v-model="isrend"
          @click="dui"
          icon-size="13px"
          checked-color="#57c1c1"
          >已经阅读同意<span>用户协议、隐私政策</span>和
          <span>买家须知</span>注册后将跳转到登录页面</van-checkbox
        >
      </p>
    </div>

    <input
      type="button"
      id="zhucece1"
      value="注册"
      @click="zhuce"
      disabled="disabled"
    />
    <router-link to="/denglu"
      ><input type="button" id="zhucece2" value="已有账号"
    /></router-link>
    <div id="icon1">
      <span class="iconfont icon-kefu1 cha"></span>
      <span class="iconfont icon-weixin cha"></span>
      <span class="iconfont icon-weibo cha"></span>
      <span class="iconfont icon-QQ cha"></span>
      <span class="iconfont icon-tubiaozhizuomoban1 cha"></span>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import $ from "jquery";

// 弹出框组件

import { Dialog } from "vant";

export default {
  name: "zhuce1",

  data: function () {
    return {
      username: "",
      userpass: "",
      usertel: "",
      usermail: "",
      isrend: false,
     
    };
  },
  beforeCreate(){
localStorage.clear()
  },
 

  methods: {
    

    qing(www) {
      if (www === 0) {
        this.username = "";
      } else if (www === 1) {
        this.userpass = "";
      } else if (www === 2) {
        this.usertel = "";
      } else if (www === 3) {
        this.usermail = "";
      }
     
    },
 

    usert() {
      let timer = setTimeout(function () {
        $("#bb").html("");
      }, 2000);
      let reg = /^[a-zA-Z0-9_-]{4,16}$/;

      if (this.username == "" || this.username == null) {
        $("#bb").html("用户名不能为空");
        $("#bb").css({ color: "red" });
        timer;
        return false;
      } else if (reg.test(this.username)) {
        axios({
          url: "/checkusername",
          method: "GET",
          params: {
            username: this.username,
          },
        }).then((res) => {
          console.log(res.data);
          if (res.data.code == "ok") {
            
            $("#bb").html("用户名已被注册");
            timer;
            $("#bb").css({ color: "gray" });
          } else{$("#bb").html("用户名可以使用");
        }}).catch(() => {
            Dialog.alert({
              confirmButtonColor:"#57c1c1",
              message: "用户名判断时候服务器故障1",
              theme: "round-button",
            });
          });
        return true;
      } else {
        $("#bb").html("用户名格式有误");
        $("#bb").css({ color: "red" });
        this.username = "";

        timer;

        return false;
      }
    },

    // 密码验证
    passt() {
      let timer = setTimeout(function () {
        $("#bb").html("");
      }, 2000);
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;

      if (this.userpass == "" || this.userpass == null) {
        $("#bb").html("密码不能为空");
        $("#bb").css({ color: "red" });
        timer;
        return false;
      } else if (reg.test(this.userpass)) {
        $("#bb").html("密码可以使用");
        $("#bb").css({ color: "gray" });
        timer;
        return true;
      } else {
        $("#bb").html("密码格式有误");

        $("#bb").css({ color: "red" });
        timer;
        return false;
      }
    },
    //  手机号验证
    phonet() {
      let timer = setTimeout(function () {
        $("#bb").html("");
      }, 2000);

      let reg = /^1[3,4,5,7,8]\d{9}$/;

      if (this.usertel == "" || this.usertel == null) {
        $("#bb").html("手机号不能为空");
        $("#bb").css({ color: "red" });

        return false;
      } else if (reg.test(this.usertel)) {
        $("#bb").html("手机号可以使用");
        $("#bb").css({ color: "gray" });
        timer;
        return true;
      } else {
        $("#bb").html("手机号格式有误");
        $("#bb").css({ color: "red" });

        timer;
        return false;
      }
    },
    //  邮箱验证
    mailt() {
      let timer = setTimeout(function () {
        $("#bb").html("");
      }, 2000);
      // console.log(this.msg);
      let reg = /^\w+@\w+(\.\w+)$/;

      if (this.usermail == "" || this.usermail == null) {
        $("#bb").html("邮箱不能为空");
        $("#bb").css({ color: "red" });
        timer;
        return false;
      } else if (reg.test(this.usermail)) {
        $("#bb").html("邮箱可以使用");
        $("#bb").css({ color: "gray" });
        timer;
        return true;
      } else {
        $("#bb").html("邮箱格式有误");
        $("#bb").css({ color: "red" });
        setTimeout(function () {
          $("#bb").html("");
        }, 2000);
        return false;
      }
    },
    // 用户协议确认
    dui() {
      if (
        this.isrend &&
        this.usert() &&
        this.passt() &&
        this.phonet() &&
        this.mailt()
      ) {
        console.log("对着呢");
        $("#zhucece1").removeAttr("disabled");
        $("#zhucece1").css({
          backgroundColor: "#000",
        });
      } else {
        console.log("都不对");
        $("#zhucece1").attr("disabled", "disabled");
        $("#zhucece1").css({
          backgroundColor: "#ccc",
        });
      }
    },
    
    zhuce() {
      if (this.usert() && this.passt() && this.phonet() && this.mailt()) {
        axios({
          method: "post",
          url: "/resisterUser",
          data: {
            username: this.username,
            userpass: this.userpass,
            usertel: this.usertel,
            usermail: this.usermail,
          },
        })
          .then((res) => {
            console.log(res.date);

            console.log("注册成功");
            // alert("注册成功,正在跳转登录页面")
            Dialog.alert({
              confirmButtonColor:"#57c1c1",
              message: "注册成功,正在跳转登录页面",
              theme: "round-button",
            }),
              setTimeout(() => {
                this.$router.push({ path: "/denglu" });
              }, 1000);
            // return true;
          })
          .catch(() => {
            Dialog.alert({
              confirmButtonColor:"#57c1c1",
              message: "点击注册服务器故障",
              theme: "round-button",
            });
          });
      } else if (
        this.usert() ||
        this.passt() ||
        this.phonet() ||
        this.mailt()
      ) {
        Dialog.alert({
          confirmButtonColor:"#57c1c1",
          message: "您的用户名或邮箱或手机号格式不正确",
          theme: "round-button",
        }).then(() => {
          // on close
        });
      } else {
        Dialog.alert({
          message: "注册失败,服务器错误",
          theme: "round-button",
        }).then(() => {
          // on close
        });
      }
    },

   
  },
};
</script>

<style scoped>
/* 引用模块部分css样式 */
#zhuce #gou p /deep/ .van-checkbox__icon {
  margin-bottom: 0.15rem;
}

#zhuce {
  width: 100%;
  height: 100%;
  font-size: 0.16rem;
  overflow: hidden;
}

#zhuce #black {
  width: 0.16rem;
  height: 0.16rem;
  transform: rotate(270deg);
  margin-top: 0.1rem;
}
#zhuce #black span {
  font-size: 0.2rem;
}

/* 提示注册 */
#zhuce #tishi {
  width: 100%;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  font-size: 0.2rem;
}
#zhuce #kuang {
  width: 75%;
  height: 1.7rem;
  /* background-color: hotpink; */
  margin: auto;
  font-weight: 700;
  font-size: 0.1rem;
}
#zhuce #kuang .zzz {
  height: 0.6rem;
}
#zhuce #kuang p {
  height: 0.3rem;
  border-bottom: solid 0.01rem gray;
}
#zhuce #kuang p input {
  /* height: 0.3rem; */
  width: 1.7rem;
  /* border: none; */
  font-size: 0.18rem;
  font-weight: 700;
  outline: none;
}
#zhuce #kuang p span {
  display: inline-block;
  /* width: 0.5rem; */

  /* background-color: greenyellow; */
}
#zhuce #kuang p .cha {
  width: 0.2rem;
  font-size: 0.12rem;
  color: gray;
  float: right;
  line-height: 0.35rem;
}

#zhuce #gou {
  width: 75%;
  margin: auto;
}
#zhuce #gou #bb {
  margin-top: 0.5rem;
  display: block;
  font-size: 0.12rem;
  height: 0.12rem;
  color: red;
  background-color: white;
  text-align: center;
}

#zhuce #gou p {
  display: inline-block;
  font-size: 0.11rem;
  color: grey;
  margin-top: 0.2rem;
}
#zhuce #gou p span {
  color: black;
}
#zhuce #zhucece1,
#zhuce #zhucece2 {
  width: 3rem;
  height: 0.4rem;
  background-color: #ccc;
  margin-left: 0.38rem;
  /* border: none; */
  font-weight: 700;
  font-size: 0.16rem;
  color: gainsboro;
  margin-top: 0.3rem;
  display: inline-block;
}
#zhuce #zhucece2 {
  background-color: black;
}
#zhuce #icon1 {
  width: 75%;
  height: 0.5rem;
 
  margin-top: 1.5rem;
  margin-left: 0.45rem;
}
#zhuce #icon1 span {
  float: left;
  margin-left: 0.3rem;
  font-size: 0.22rem;
}
</style>